import React from 'react';
import classNames from 'classnames';
import './mask.less';

class Mask extends React.PureComponent {
  state = {
    visible: this.props.visible
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.visible !== nextProps.visible
      && nextProps.visible !== this.state.visible) {
      this.setState({visible: nextProps.visible});
    }
  }

  fClick = (e) => {
    e.stopPropagation();
    this.setState({visible: false});
    const {onClose} = this.props;
    if (typeof onClose === 'function') {
      onClose();
    }
  };

  render() {
    const {children, className, style = {}} = this.props;
    const {visible} = this.state;
    const maskCls = classNames('pl-mask-wrap', className);
    return (
      <div className={maskCls} style={{display: visible ? 'block' : 'none'}}>
        <div
          className='pl-mask'
          style={style}
          onClick={this.fClick}
        />
        {children}
      </div>
    )
  }
}

export default Mask;
